<template>
<div>
    <el-upload
  action="#"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :limit="1"
  :file-list="dialogImageUrl"
  :class="{action:DIS}"
  :on-change="changeFile"
  :before-upload="beforeUpload"
  :http-request="upload"
  >
  <i class="el-icon-plus"></i>
</el-upload>
<el-progress :percentage="percentagejindu" style="width:180px" v-if="showjindu"></el-progress>
<el-dialog :visible.sync="dialogVisible" title="图片预览">
  <img width="100%" :src="imgeUR" alt="">
</el-dialog>
</div>

</template>

<script>
// 引入下载的腾讯云组件
import COS from 'cos-js-sdk-v5'
// 创建实例
let cos = new COS({
  // 在api秘钥管理中
  SecretId: 'AKID386nDeuwveFc1FLYYM0e6mGYgYllV3NT', // 身份识别 ID
  SecretKey: 'woRpyuc6KL8ugDVXLxNZVCdw970rKiwy' // 身份密钥
})
 export default {
    data() {
      return {
        // 地址
        dialogImageUrl:[],
        dialogVisible: false,
        imgeUR:"https://pica.zhimg.com/80/v2-52c6a263aa552a2158d374767cfee809_1440w.webp?source=1940ef5c",
        // 进度跳的显示与隐藏
        showjindu:false,
        //进度条的值
        percentagejindu:0,
        // 记录图片的uid
        currentFileUid:"",
      };
    },
    computed:{
      // 判断是否显示空的头像框
      DIS(){
return this.dialogImageUrl.length===1
      }
    },
    methods: {
      // 删除后显示一个空的头像框
      handleRemove(file, fileList) {
        // 返回的是一个空数组
       this.dialogImageUrl= this.dialogImageUrl.filter(item => item.uid !== file.uid)
        // 最简单的方法
        // this.dialogImageUrl=fileList
      },
      // 预览图函数
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 添加图片显示
      changeFile(file, fileList){
        this.dialogImageUrl=fileList.map(ITME=>ITME)
        // console.log(file);
        this.currentFileUid=file.uid
      },
      // 上传文件的大小和格式
      beforeUpload(file){
        // 创建检查的类型
         const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
              if (!types.includes(file.type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false //停止上传
      }
        //  创建检查的大小
          //  检查大小
      const maxSize = 5 * 1024 * 1024
         if (maxSize < file.size) {
        this.$message.error('图片大小最大不能超过5M')
        return false //停止上传
      }  
      this.showjindu=true
      return true  // 继续上传
// console.log(file);
      },
      //覆盖默认的上传行为
      upload(params){
        // 拿到上传的值
  if(params.file){
// 执行上传操作
       cos.putObject({
        // 存储桶的名称
    Bucket: 'lei-aoj5431-1315382267', 
    // 存储桶的区域地址
    Region: 'ap-beijing', 
    // 上传的文件命称
    Key:params.file.name , 
    // 要传送到腾讯云得数据
    Body: params.file, 
    // 默认上传类型
    StorageClass:"STANDARD",
          // 进度条 
          onProgress: (params) => {
            this.percentagejindu = params.percent * 100
          }
}, (err, data)=> {
    console.log(err || data);
    // 执行传输成功之后的操作如果没有错误并且响应值是二百表示成功
    if(!err&&data.statusCode===200){
 this.dialogImageUrl= this.dialogImageUrl.map(item=>{
  console.log(item);
  if(item.uid === this.currentFileUid){
      // 上传完毕
  setTimeout(()=>{
this.showjindu=false
this.percentagejindu=0
  },1000)
    // 这里是拼接图片完整的数据
    return {
      url:"http://"+data.Location,upload: true 
    }
  }

})
    }
});
  }
      }
    }
  }
</script>

<style>
.action .el-upload--picture-card{
display: none;
}
</style>